<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>媒体查询media</title>
    <style>
        @media screen and (max-width: 600px) {
            body {
                background-color: red;
            }
        }
    </style>
</head>
<body>
    <p>写一个html+css媒体查询的例子</p>
    <p>媒体查询（Media Queries）是CSS3的一个新特性，它允许我们根据不同的设备和屏幕尺寸应用不同的样式。通过媒体查询，我们可以根据设备的特性（如屏幕宽度、高度、分辨率等）来控制网页的布局和样式，从而实现响应式设计。其中，media-type表示媒体类型，如screen表示屏幕，print表示打印机；media-feature表示媒体特性，如width表示宽度，height表示高度，resolution表示分辨率等；value表示媒体特性的值。
    </p>
</body>
</html>